<template>
	<common-nav-bar home viewed collect category my>
		<view class="title" slot="content">
			<view  v-for="(item, index) in titles" :key="index" class="title-item view"
				:class="{ active: index === currentIndex }" @click="itemClick(index)">
				{{ item }}
			</view>
		</view>
	</common-nav-bar>
</template>

<script>
	import CommonNavBar from "components/common/NavBar/CommonNavBar";
	export default {
		components: {
			CommonNavBar
		},
		props: {
			cursor: {
				type: Number,
				default () {
					return 0;
				},
			},
		},
		data() {
			return {
				titles: ["商品", "参数", "评论", "推荐"],
				currentIndex: 0,
				showMenu: false,
			};
		},

		methods: {
			itemClick(index) {
				this.$emit("titleClick", index);
				this.currentIndex = index;
			},

			menu() {
				this.showMenu = !this.showMenu;
			},
		},

		watch: {
			cursor(newV) {
				this.currentIndex = newV;
			},
		},


	};
</script>
<style lang="scss" scoped>
	.btn {
		display: flex;
		width: 120rpx;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.title {
		display: flex;
		width: 100%;
	}

	.title .view {
		flex: 1;
	}

	.active {
		color: red;
	}
</style>
